<template>
  <div>
    <!--<van-nav-bar title="标题" @click-right="search">-->
      <!--<van-icon name="search" slot="right" />-->
    <!--</van-nav-bar>-->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-swipe :autoplay="3000" :height="200">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
      <van-cell icon="tv-o" title="小班课直播" is-link :to="{path:'/index/more', query:{type: 'small'}}" value="更多" />
      <van-row class="content-list">
        <van-col class="list-child" v-for="item in SmallClassCourse" :key="item.id" span="11">
          <img :src="item.handcover" @click="courseDetail(item.id, 2)" alt="">
          <span>{{item.courseName}}</span>
          <span style="color: #ff4444">￥{{item.price}}</span>
        </van-col>
      </van-row>
      <van-cell icon="tv-o" title="热门点播" is-link :to="{path:'/index/more', query:{type: 'point'}}" value="更多" />
      <van-row class="content-list">
        <van-col class="list-child" v-for="item in OnDemandCourse" :key="item.id" span="11">
          <img :src="item.handcover" @click="courseDetail(item.id, 0)" alt="">
          <span>{{item.courseName}}</span>
          <span style="color: #ff4444">￥{{item.price}}</span>
        </van-col>
      </van-row>
      <van-cell icon="tv-o" title="热门直播" is-link :to="{path:'/index/more', query:{type: 'big'}}" value="更多" />
      <van-row class="content-list">
        <van-col class="list-child" v-for="item in LiveBroadcastCourse" :key="item.id" span="11">
          <img :src="item.handcover" @click="courseDetail(item.id, 1)" alt="">
          <span>{{item.courseName}}</span>
          <span style="color: #ff4444">￥{{item.price}}</span>
        </van-col>
      </van-row>
    </van-pull-refresh>
    <i-footer :active="active"></i-footer>
    <van-popup style="width: 100%;height: 100%" v-model="searchShow" position="right">
      <van-search
        v-model="searchValue"
        placeholder="请输入搜索关键词"
        show-action
        @search="submitSearch"
        @cancel="searchShow = false"
      >
      </van-search>
      <p class="number-data">共1条数据</p>
      <van-row class="content-list">
        <van-col class="list-child" span="11">
          <img src="./../../assets/1.jpg" alt="">
          <span>课程名字</span>
          <span>2018-01-16 08:00</span>
        </van-col>
        <van-col class="list-child" span="11">
          <img src="./../../assets/2.jpg" alt="">
          <span>课程名字</span>
          <span>2018-01-16 08:00</span>
        </van-col>
        <van-col class="list-child" span="11">
          <img src="./../../assets/3.jpg" alt="">
          <span>课程名字</span>
          <span>2018-01-16 08:00</span>
        </van-col>
        <van-col class="list-child" span="11">
          <img src="./../../assets/4.jpg" alt="">
          <span>课程名字</span>
          <span>2018-01-16 08:00</span>
        </van-col>
      </van-row>
    </van-popup>
  </div>
</template>

<script>
  import Footer from '_c/footer'
  export default {
    name: 'home',
    components: {
      IFooter: Footer
    },
    data() {
      return {
        images: [
          'https://img.yzcdn.cn/2.jpg',
          'https://img.yzcdn.cn/2.jpg'
        ],
        isLoading: false,
        searchShow: false,
        active: 0,
        searchValue: '',
        pageSize: 2,
        pageNumber: 0,
        OnDemandCourse: [],
        LiveBroadcastCourse: [],
        SmallClassCourse: []
      }
    },
    mounted() {
      this.onRefresh()
    },
    methods: {
      onRefresh() {
        this.getOnDemandCourse()
        this.getLiveBroadcastCourse()
        this.getSmallClassCourse()
      },
      getOnDemandCourse() {
        let url = '/api/api/student/course/page'
        let params = {
          size: this.pageSize,
          number: this.pageNumber,
          courseType: 2
        }
        this.$get(url, params).then((res) => {
          if (res.code === 0) {
            this.isLoading = false
            this.OnDemandCourse = res.data
          }
        })
      },
      getLiveBroadcastCourse() {
        let url = '/api/api/student/course/page'
        let params = {
          size: this.pageSize,
          number: this.pageNumber,
          courseType: 1,
          liveType: 1
        }
        this.$get(url, params).then((res) => {
          if (res.code === 0) {
            this.isLoading = false
            this.LiveBroadcastCourse = res.data
          }
        })
      },
      getSmallClassCourse() {
        let url = '/api/api/student/course/page'
        let params = {
          size: this.pageSize,
          number: this.pageNumber,
          courseType: 1,
          liveType: 2
        }
        this.$get(url, params).then((res) => {
          if (res.code === 0) {
            this.isLoading = false
            this.SmallClassCourse = res.data
          }
        })
      },
      search() {
        this.searchShow = true
      },
      submitSearch() {
        console.log(this.searchValue)
      },
      courseDetail(id, type) {
        this.$router.push({path: '/index/course-detail', query: {id: id, type: type}})
      }
    }
  }
</script>

<style scoped>
  .van-swipe-item img{
    width: 100%;
    height: 100%;
  }
  .van-cell:not(:last-child)::after{
    border-bottom: 0px;
  }
  .content-list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 10px 20px;
  }
  .list-child{
    height: 360px;
    display: flex;
    margin: 12px;
    flex-direction: column;
  }
  .list-child img{
    width: 100%;
    height: 260px;
    border-radius: 15px;
  }
  .number-data{
    font-size: 24px;
    margin: 10px 36px;
    color: #333333;
  }
</style>
